<template>
  <div>
    <div class="share-title share-title-line">分享到以下平台</div>
    <ul class="list_box">
      <li class="list_item" @click="share(0)">
        <div class="outer_circle">
          <span class="iconfont">&#xe6ea;</span>
        </div>
        <div class="list_text">微信</div>
      </li>
      <li class="list_item" @click="share(1)">
        <div class="outer_circle">
          <span class="iconfont">&#xe610;</span>
        </div>
        <div class="list_text">QQ</div>
      </li>
      <li class="list_item" @click="share(2)">
        <div class="outer_circle">
          <span class="iconfont">&#xe60c;</span>
        </div>
        <div class="list_text">朋友圈</div>
      </li>
      <li class="list_item" @click="share(3)">
        <div class="outer_circle">
          <span class="iconfont">&#xe666;</span>
        </div>
        <div class="list_text">QQ空间</div>
      </li>
      <li
        class="list_item"
        @click="share(4)"
        id="copy_text"
        :data-clipboard-text="this.info.apk_url"
      >
        <div class="outer_circle">
          <span class="iconfont">&#xe61a;</span>
        </div>
        <div class="list_text">复制链接</div>
      </li>
    </ul>
    <p class="text_text">或保存以下二维码图片进行分享</p>
    <div class="img_box" ref="qrcode" id="qrcodeDom"></div>
    <div :class="appName === '277'?'preservation_img':'preservation_img_cat'" @click="savePic">保存图片</div>
  </div>
</template>

<script>
import NativeShare from "nativeshare";
import Clipboard from "clipboard";
import QRCode from "qrcodejs2";
import { Toast } from "vant";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      list: [
        { text: "生成邀请函", code: "&#xe61a;" },
        { text: "微信", code: "&#xe6ea;" },
        { text: "QQ", code: "&#xe610;" },
        { text: "朋友圈", code: "&#xe60c;" },
        { text: "QQ空间", code: "&#xe666;" },
        { text: "复制链接", code: "&#xe61a;" },
      ],
      imgData: "",
    };
  },
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    appName: {
      type: String,
      default: null
    },
  },
  mounted() {
    this.getQrcode();
  },
  methods: {
    share(val) {
      switch (val) {
        case 0:
          this.call("wechatFriend");
          break;
        case 1:
          this.call("qqFriend");
          break;
        case 2:
          this.call("wechatTimeline");
          break;
        case 3:
          this.call("qZone");
          break;
        case 4:
          this.copyClick();
          break;
      }
    },
    call(command) {
      var nativeShare = new NativeShare();
      var shareData = {
        title: this.info.gamename,
        desc: this.info.game_description,
        // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
        link: this.info.apk_url,
        icon: this.info.gameicon,
        // 不要过于依赖以下两个回调，很多浏览器是不支持的
        success: function () {
          Toast("分享成功");
        },
        fail: function () {
          Toast("分享失败");
        },
      };
      nativeShare.setShareData(shareData);
      try {
        nativeShare.call(command);
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        console.log(err.message);
      }
    },
    copyClick() {
      let clipboard = new Clipboard("#copy_text");
      clipboard.on("success", (e) => {
        Toast("已复制到剪切板");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast("该浏览器不支持复制");
        clipboard.destroy(); // 释放内存
      });
    },
    transQrcode() {
      let qrcode = new QRCode("qrcodeDom", {
        width: 300,
        height: 300,
        text: this.info.apk_url, //需要转换的链接
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });
      this.createPicture();
    },
    //点击开始进行转化
    getQrcode() {
      // console.log('url');
      this.$nextTick(() => {
        this.transQrcode();
      });
    },
    createPicture() {
      html2canvas(this.$refs.qrcode, {
        backgroundColor: null,
        width: 200,
        height: 200,
      }).then((canvas) => {
        const imgData = canvas.toDataURL("image/jpeg");
        this.imgData = imgData;
      });
    },
    savePic(Url) {
      Url = this.imgData; //图片路径，也可以传值进来
      var triggerEvent = "touchstart"; //指定下载方式
      var blob = new Blob([""], { type: "application/octet-stream" }); //二进制大型对象blob
      var url = URL.createObjectURL(blob); //创建一个字符串路径空位
      var a = document.createElement("a"); //创建一个 a 标签
      a.href = Url; //把路径赋到a标签的href上
      //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
      a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, "$2").split("?")[0];
      /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
	    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
      var e = new MouseEvent(
        "click",
        (true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null)
      );
      //派遣后，它将不再执行任何操作。执行保存到本地
      a.dispatchEvent(e);
      //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
      URL.revokeObjectURL(url);
    },
  },
};
</script>

<style scoped>
.share-title {
  padding: 50px 0 30px 0;
  text-align: center;
  font-size: 30px;
  color: #666;
}

.share-title-line {
  border-top: 1px solid rgb(206, 206, 206);
}

.list_box {
  width: 680px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(206, 206, 206);
}

.list_item {
  box-sizing: border-box;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.outer_circle {
  padding: 0 27px;
}

.iconfont {
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1px solid #999;
  text-align: center;
  line-height: 116px;
  font-size: 80px;
}

.list_text {
  font-size: 26px;
}

.text_text {
  font-size: 28px;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.img_box {
  width: 300px;
  height: 300px;
  margin-left: 190px;
}

.preservation_img {
  width: 250px;
  height: 80px;
  margin: 40px 215px 80px;
  border: 1px solid #2f41eb;
  border-radius: 10px;
  font-size: 30px;
  color: #2f41eb;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}

.preservation_img_cat {
  width: 250px;
  height: 80px;
  margin: 40px 215px 80px;
  border: 1px solid #FF8210;
  border-radius: 10px;
  font-size: 30px;
  color: #FF8210;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
}
</style>